<template>
    <!-- 自己封装组件需要注意：
        1.内容              
    
    -->
    <div class="topSelectBox w-flex2">
        <div :class="selectIndex==index?'aitem':'item'" v-for="(item, index) in navList" 
        :key="index" @click="change(item,index)">{{ item }}</div>
        <!--  @click="change(item,index)"  item 选中后，传给父组件。组件抽离了   index，可控制高亮效果 -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let navList: any = ['今天', '昨天', '最近一周', '最近一个月']

let selectIndex = ref(0)

// 能不用响应式数据 就不用 ， 因为 navList 不用考虑性能损耗问题
const change = (item:string,index:number)=>{
    // 怎么知道自己点击的 是哪一项， 需要一个响应式数据
    selectIndex.value = index
}
</script>

<style scoped lang="scss">
.topSelectBox {
    // background-color: blue;
    .item{
        padding: 5px 10px;
        cursor: pointer;

    }
    .aitem{
        color: blue;
        padding: 5px 10px;
        cursor: pointer;
    }
}
</style>